<!--
 * @Author: White
 * @description: 导航栏
 * @LastEditTime: 2021-08-17 22:47:33
-->

<template>
  <div class="header">
    <div class="header-wrap">
      <div class="header-logo" @click="routeJumb('/')" >首页</div>
      <nav>
        <ul>
          <li @click="routeJumb('/leave')">心愿墙</li>
          <li @click="routeJumb('/music')">网易云</li>
        </ul>
      </nav>
      <div class="publish">
        <el-button type="primary" icon="el-icon-collection" @click="routeJumb('/article')">发布文章</el-button>
        <el-button type="primary" icon="el-icon-collection" @click="dialogVisible = true">登录</el-button>
      </div>
      <el-dialog
        title="账户登录"
        v-model="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <div>
          <el-form>
            <el-form-item label='账号'>
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label='密码'>
              <el-input v-model="form.password"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="submit">确 定</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, ref, toRefs } from 'vue'
import { app } from '@/api/clouldbase'
import { useRouter } from 'vue-router'
export default defineComponent({
  setup () {
    const router = useRouter()
    const data = reactive({
      form: {
        name: '',
        password: ''
      }
    })
    const dialogVisible = ref(false)
    // 路由跳转
    const routeJumb = path => {
      router.push(path)
    }
    async function login () {
      const auth = app.auth()
      await auth.signInWithEmailAndPassword('1293616053@qq.com', 'jinyaowei@1314G')
      if (!(await auth.isUsernameRegistered('white'))) { // 检查用户名是否绑定过
        await auth.currentUser.updateUsername('white') // 绑定用户名
      }
    }
    const handleClose = (done) => {
      done()
    }
    const submit = () => {
      dialogVisible.value = false
      login()
    }
    return {
      ...toRefs(data),
      handleClose,
      submit,
      dialogVisible,
      login,
      routeJumb
    }
  }
})
</script>

<style lang="scss" scoped>
.header {
  background: #fff;
  border-bottom: 1px solid #f1f1f1;
  color: #909090;
  height: 60px;
  line-height: 60px;
  box-shadow: 0 1px 2px 0 .7;
  .header-wrap {
    display: flex;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    max-width: 1200px;
    nav {
      flex: 1 1 auto;
      padding-left: 30px;
      ul {
        display: flex;
        align-items: center;
        li {
          padding: 0px 20px;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
